<template>
  <view>
    <u-navbar title="优惠券" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#1A9EFF" inactive-color="#222222"></u-tabs>
    </view>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="getList">
      <view class="" v-for="(i, k) in lists" :key="k">
        <view class="" v-if="current == 0" style="position: relative; width: 676rpx; height: 184rpx; margin: 23rpx auto">
          <view class="" style="width: 676rpx; height: 184rpx">
            <image src="https://wenzhen.fuerle168.com/static/user/se.png" mode="" style="width: 676rpx; height: 184rpx"></image>
          </view>
          <view class="" style="color: #cba349; position: absolute; top: 60rpx; left: 50rpx">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 66rpx">{{ i.price }}</text>
          </view>
          <view class="" style="font-size: 28rpx; color: #704a19; position: absolute; top: 45rpx; left: 198rpx">
            {{ i.title }}
          </view>
          <view class="" style="font-size: 24rpx; color: #9d7314; position: absolute; top: 85rpx; left: 198rpx">限{{ i.usage_time }}-{{ i.expiretime }}使用</view>
          <view class="" style="font-size: 22rpx; color: #b9891c; position: absolute; bottom: 25rpx; left: 198rpx">满{{ i.full_price }} 使用</view>
          <view class="" style="font-size: 28rpx; color: #663506; width: 28rpx; position: absolute; bottom: 10rpx; right: 70rpx" @tap="joop">立即使用</view>
        </view>

        <view class="" v-if="current == 1" style="position: relative; width: 676rpx; height: 184rpx; margin: 23rpx auto">
          <view class="" style="width: 676rpx; height: 184rpx">
            <image src="https://wenzhen.fuerle168.com/static/user/wu.png" mode="" style="width: 676rpx; height: 184rpx"></image>
          </view>
          <view class="" style="color: #666666; position: absolute; top: 60rpx; left: 50rpx">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 66rpx">{{ i.price }}</text>
          </view>
          <view class="" style="font-size: 28rpx; color: #666666; position: absolute; top: 45rpx; left: 198rpx">
            {{ i.title }}
          </view>
          <view class="" style="font-size: 24rpx; color: #666666; position: absolute; top: 85rpx; left: 198rpx">限{{ i.usage_time }}-{{ i.expiretime }}使用</view>
          <view class="" style="font-size: 22rpx; color: #8c8c8c; position: absolute; bottom: 25rpx; left: 198rpx">满{{ i.full_price }} 使用</view>
          <view class="" style="font-size: 28rpx; color: #9f2500; width: 28rpx; position: absolute; bottom: 30rpx; right: 70rpx">已使用</view>
        </view>

        <view class="" v-if="current == 2" style="position: relative; width: 676rpx; height: 184rpx; margin: 23rpx auto">
          <view class="" style="width: 676rpx; height: 184rpx">
            <image src="https://wenzhen.fuerle168.com/static/user/wu.png" mode="" style="width: 676rpx; height: 184rpx"></image>
          </view>
          <view class="" style="color: #666666; position: absolute; top: 60rpx; left: 50rpx">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 66rpx">{{ i.price }}</text>
          </view>
          <view class="" style="font-size: 28rpx; color: #666666; position: absolute; top: 45rpx; left: 198rpx">
            {{ i.title }}
          </view>
          <view class="" style="font-size: 24rpx; color: #666666; position: absolute; top: 85rpx; left: 198rpx">限{{ i.usage_time }}-{{ i.expiretime }}使用</view>
          <view class="" style="font-size: 22rpx; color: #8c8c8c; position: absolute; bottom: 25rpx; left: 198rpx">满{{ i.full_price }} 使用</view>
          <view class="" style="font-size: 28rpx; color: #999999; width: 28rpx; position: absolute; bottom: 30rpx; right: 70rpx">已失效</view>
        </view>
      </view>
      <!-- <view class=""
			style="margin: 23rpx 35rpx;background: url(../../static/user/se.png) no-repeat;background-size: 100% 100%;height: 184rpx;display: flex;align-items: center;"
			v-if="current==0">
			<view class="" style="color: #CBA349;padding-left: 33rpx;">
				<text style="font-size: 24rpx;">￥</text>
				<text style="font-size: 66rpx;">25</text>
			</view>
			<view class="" style="padding-left: 42rpx;">
				<view class="" style="font-size: 28rpx;color: #704A19;">
					{{.}}
				</view>
				<view class="" style="font-size: 24rpx;color: #9D7314;">
					限2021.06.08-2021.07.08使用
				</view>
				<view class="" style="font-size: 22rpx;color: #B9891C;">
					商品满减券
				</view>
			</view>
			<view class="" style="font-size: 28rpx;color: #663506;width: 28rpx;padding-left: 85rpx;">
				立即使用
			</view>

		</view> -->
      <!-- 已使用 -->
      <!-- <view class=""
			style="margin: 23rpx 35rpx;background: url(../../static/user/wu.png) no-repeat;height: 184rpx;display: flex;align-items: center;background-size: 100% 100%;"
			v-if="current==1">
			<view class="" style="color: #666666;padding-left: 33rpx;">
				<text style="font-size: 24rpx;">￥</text>
				<text style="font-size: 66rpx;">25</text>
			</view>
			<view class="" style="padding-left: 42rpx;">
				<view class="" style="font-size: 28rpx;color: #666666;">
					商品满减券
				</view>
				<view class="" style="font-size: 24rpx;color: #666666;">
					限2021.06.08-2021.07.08使用
				</view>
				<view class="" style="font-size: 22rpx;color: #8C8C8C;">
					商品满减券
				</view>
			</view>
			<view class="" style="font-size: 28rpx;color: #9F2500;width: 28rpx;padding-left: 85rpx;">
				已使用
			</view>

		</view> -->

      <!-- 已使用 -->
      <!-- <view class=""
			style="margin: 23rpx 35rpx;background: url(../../static/user/wu.png) no-repeat;height: 184rpx;display: flex;align-items: center;background-size: 100% 100%;"
			v-if="current==2">
			<view class="" style="color: #666666;padding-left: 33rpx;">
				<text style="font-size: 24rpx;">￥</text>
				<text style="font-size: 66rpx;">25</text>
			</view>
			<view class="" style="padding-left: 42rpx;">
				<view class="" style="font-size: 28rpx;color: #666666;">
					商品满减券
				</view>
				<view class="" style="font-size: 24rpx;color: #666666;">
					限2021.06.08-2021.07.08使用
				</view>
				<view class="" style="font-size: 22rpx;color: #8C8C8C;">
					商品满减券
				</view>
			</view>
			<view class="" style="font-size: 28rpx;color: #999999;width: 28rpx;padding-left: 85rpx;">
				已失效
			</view>

		</view> -->
    </scroll-view>
    <!-- <view class="" style="padding-left: 59rpx;padding-top: 57rpx;">
			<view class="" style="font-size: 28rpx;color: #222222;">
				使用规则
			</view>
			<view class="" style="font-size: 24rpx;color: #666666;padding-top: 35rpx;">
				<view class="">
					1、优惠券使用后不可返回
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      list: [
        {
          name: '可使用'
        },
        {
          name: '已使用'
        },
        {
          name: '已失效'
        }
      ],
      current: 0,
      boxHeight: '',
      page: 1,
      lists: []
    };
  },
  onReady() {
    this.box();
  },
  onShow() {
    this.getList(1);
  },
  //方法
  methods: {
    joop() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    change(index) {
      this.current = index;
      this.getList(1);
    },
    getList(e) {
      if (e == 1) {
        this.lists = [];
        this.page = 1;
      }

      this.api({
        url: '/api/index/couponList',
        method: 'post',
        data: {
          page: this.page,
          status: this.current + 1
        }
      }).then((res) => {
        this.lists = this.lists.concat(res.data);
        this.page++;
      });
    }
  },
  //首页渲染
  onLoad(options) {},
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
